
<script setup>
import { ref, watch ,onMounted} from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import { putPileAPI} from "@/apis/api_pile.js";
import PileFileUploadDownload from "@/views/pile/components/PileFileUploadDownload.vue";
import PileImage from "@/views/pile/components/PileImage.vue";
import {getPileImagesAPI} from "@/apis/api_pile_image.js";
import {RouterLink} from "vue-router";
// 定义弹窗开关
const dialogVisible=ref(false);
const formData=ref({})
//打开弹窗
const pileImages=ref([]);
const openDialogImage=async (row)=>{
  dialogVisible.value=true;
  console.log("弹窗打开",row)
  formData.value=row

  const res=await getPileImagesAPI(row.pileNumber)
  console.log(res)
  if(res.flag){
    pileImages.value=res.data
    console.log("找到如下图片",pileImages.value)
  }else{
    pileImages.value=[]
  }

}
defineExpose({openDialogImage})


const emits=defineEmits(['save'])
/*
const saveChanges = () => {
  // 这里可以添加保存数据的逻辑，例如调用 API 进行数据更新
  console.log('保存的数据:', formData.value);
  axios.put('http://192.168.1.245:8080/pileData',formData.value)
  dialogVisible.value=false;
  // 通知父组件数据已保存，这里可以通过 emit 事件实现
  emits("save",formData.value);
};
*/

const saveChanges = () => {
  // 这里可以添加保存数据的逻辑，例如调用 API 进行数据更新
  console.log('保存的数据:', formData.value);
  putPileAPI(formData.value);
  dialogVisible.value=false;
  // 通知父组件数据已保存，这里可以通过 emit 事件实现
  emits("save",formData.value);
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="60%">
    <el-form :model="formData" label-width="120px">
      <ul>
        <li> <el-form-item label="ID">
          <el-input v-model="formData.id" disabled></el-input>
        </el-form-item>
        </li>
        <li>
          <el-form-item label="桩基号">
            <el-input v-model="formData.pileNumber"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="里程">
            <el-input v-model="formData.mileage" type="number"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="桩长">
            <el-input v-model="formData.pileLength" type="number"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="钢筋笼长度">
            <el-input v-model="formData.steelCageLength" type="number"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="试块编号">
            <el-input v-model="formData.testBlockNumber"></el-input>
          </el-form-item></li>
        <li>
          <el-form-item label="开挖时间">
            <el-date-picker
                v-model="formData.excavationTime"
                type="datetime"
                placeholder="选择开挖时间"
            >
            </el-date-picker>
          </el-form-item>
          <PileFileUploadDownload :data="formData" operation="开挖时间"></PileFileUploadDownload>
        </li>
        <li>
          <el-form-item label="开孔时间">
            <el-date-picker
                v-model="formData.holeOpeningTime"
                type="datetime"
                placeholder="选择开孔时间"
            >

            </el-date-picker>
          </el-form-item>

          <PileFileUploadDownload :data="formData" operation="开孔时间"></PileFileUploadDownload>


        </li>

        <li>
          <el-form-item label="下钢筋笼时间">
            <el-date-picker
                v-model="formData.reinforcementCageLoweringTime"
                type="datetime"
                placeholder="选择下钢筋笼时间"
            >
            </el-date-picker>
          </el-form-item>
          <PileFileUploadDownload :data="formData" operation="下钢筋笼时间"></PileFileUploadDownload>
        </li>

        <li>
          <el-form-item label="浇筑时间">
            <el-date-picker
                v-model="formData.pouringTime"
                type="datetime"
                placeholder="选择浇筑时间"
            >
            </el-date-picker>
          </el-form-item>
          <PileFileUploadDownload :data="formData" operation="浇筑时间"></PileFileUploadDownload>
        </li>

        <li>
          <el-button @click="saveChanges">保存</el-button>
        </li>
      </ul>
      <ul>
        <li v-for="(item,index) in pileImages" :key="index">

          <RouterLink to="/" class="pileImage">
            <!-- 这里假设使用 v-lazy 指令实现图片懒加载 -->

            <!-- http://192.168.1.245:9000/fileservice/2-1/1%20(2).png   -->
            <!--        <img
                        v-img-lazy="`http://192.168.1.245:9000/fileservice/${encodeURIComponent(item.filePath)}`"
                        alt="桩基图片"
                    >-->
            <div style="width: 350px; height: 350px">
              <img
                  :src="`http://192.168.1.245:9000/fileservice/${encodeURIComponent(item.filePath)}`"
                  alt="桩基图片"
                  style="height: 300px;width: 300px"
              >
              <p class="pileNumber">{{ item.filePath }}</p>
              <p class="pileNumber">{{ item.pileNumber }}</p>
              <p class="operation">{{ item.operation }}</p>
            </div>

          </RouterLink>
        </li>
      </ul>
    </el-form>
  </el-dialog>
</template>

<style scoped>
/* 可根据需要添加自定义样式 */
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
/*li:last-child {
  margin-left: auto;
}*/
</style>